<template>
  <transition name="fade-right">
    <div class="search">
      <search-box ref="searchBox" @query="searchQuery"></search-box>
      <div class="search-wrap">
        <scroll>
          <div class="hot-key">
            <h1 class="title">热门搜索</h1>
            <ul>
              <li
                @click="searchQuery(item.k)"
                class="item"
                v-for="item in hotKey"
                :key="item.k"
              >
                <span>{{item.k}}</span>
              </li>
            </ul>
          </div>
          <div class="search-history" v-show="searchHistory.length">
            <h1 class="title">
              <span class="text">搜索历史</span>
              <span @click="showConfirm" class="clear">
                <i class="iconfont">&#xe64a;</i>
              </span>
            </h1>
            <history @delete="handleHistoryDel" @item="searchQuery" :list="searchHistory" />
          </div>
        </scroll>
      </div>
      <div v-if="showResult" class="result">
        <result :query="query" />
      </div>
      <confirm
        ref="confirm"
        @confirm="clearHistory"
        text="是否清空搜索历史记录"
        confirmText="清空"
      />
    </div>
  </transition>
</template>

<script>
import Scroll from 'baseUI/Scroll'
import SearchBox from 'components/search-box'
import History from './components/History'
import Result from './components/Result'
import Confirm from 'baseUI/Confirm'

import { getHotKey } from 'api/search'
import { ERR_OK } from 'api/config'

export default {
  name: 'Search',
  components: {
    Scroll,
    Confirm,
    SearchBox,
    History,
    Result
  },
  data () {
    return {
      hotKey: [],
      searchHistory: [],
      showResult: false,
      query: ''
    }
  },
  created () {
    this._getHotKey()
  },
  methods: {
    showConfirm () {
      this.$refs.confirm.show()
    },
    clearHistory () {
      this.searchHistory = []
    },
    _getHotKey () { // 获取热门搜索
      getHotKey().then((res) => {
        if (res.code === ERR_OK) {
          this.hotKey = res.data.hotkey.slice(0, 10)
        }
      })
    },
    handleHistoryDel (index) { // 删除单条历史
      this.searchHistory.splice(index, 1)
    },
    searchQuery (query) { // 搜索
      this.$refs.searchBox.setQuery(query)
      if (!query) {
        this.showResult = false
        return
      }
      let index = this.searchHistory.findIndex(item => item === query)
      if (index === -1) {
        this.searchHistory.unshift(query)
      }
      this.showResult = true
      this.query = query
    }
  }
}
</script>

<style lang="less" scoped>
@import '~assets/style/variable';
@import '~assets/style/mixin';
.search {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: var(--bg-color);
  &-wrap {
    position: fixed;
    top: 60px;
    bottom: 0;
    left: 0;
    right: 0;
  }
  .hot-key {
    margin: 0px 10px;
    .title {
      margin-bottom: 15px;
      font-size: @fs-medium;
      color: var(--text-color);
      font-weight: 600;
    }
    .item {
      display: inline-block;
      padding: 5px 10px;
      margin: 0 10px 10px 0;
      border-radius: 4px;
      background: var(--shortcut-color);
      font-size: @fs-medium;
      color: var(--text-color);
    }
  }
  &-history {
    position: relative;
    margin: 0 10px;
    .title {
      display: flex;
      align-items: center;
      font-size: @fs-medium;
      color: var(--text-color);
      height: 40px;
      border-bottom: 1px solid @border-color;
      .text {
        flex: 1;
        font-weight: 600;
      }
      .clear {
        .extend-click();
        .iconfont {
          font-size: @fs-large;
          color: var(--text-color);
        }
      }
    }
  }
  .result {
    position: fixed;
    width: 100%;
    top: 50px;
    bottom: 0;
    background-color: var(--bg-color);
  }
}
</style>
